import React,{ Component } from 'react';
import {
    ListStyle,ListContainerStyle,ListUl,ListLi,DetailsTopStyle
} from './ListStyle';
import BScroll from 'better-scroll';
import {Link} from 'react-router-dom';

// import { Toast } from 'antd-mobile';s

const Item = (props) => {
    return(
        <ListLi>
            <Link to = {
                {
                    pathname:'/tuandetails/'+props.item_id,
                    search:'?id='+ props.item_id +'&type='+props.type
                }
            }>
                <div className="shopMessage">
                    <img src={props.image} alt=""/>
                    <div className="discuss"> {props.buyer_number_text} </div>
                </div>
                <div className="shopList">
                    <span className="goods-num">{props.group_name_tag}</span>{props.short_name}
                </div>
                <div className="good-foot">
                    <div className="price">
                        <span className="ct-price">{props.jumei_price}</span>
                        <span className="jm-price">{props.single_price}</span>
                    </div>
                    <div className="time-right">
                        {props.gotuan}
                    </div>
                </div>
            </Link>
        </ListLi>
    )
}

class List extends Component{

    constructor(){
        super();
        this.state = {
            goTuan:'去开团',
            goTopFlag:false,
            count:1
        }
    }


    componentDidMount(){
        this.scroll = new BScroll( this.box,{
            scrollY: true,
            click: true,
            mouseWheel: {
                speed: 10,
                invert: false,
                easeTime: 300
            },
            pullUpLoad: {
                threshold: 50 //开启上拉事件
            }
        })

        this.scroll.on("scroll",(e) => {
           
            if( e.y>-1000 ){
                this.setState({
                    goTopFlag:false
                })
            }
            if( e.y<-1000 ){
                this.setState({
                    goTopFlag:true
                })
            }
            // if(e.y<-3800){
            //     this.scroll.on('pullingUp',() => {
            //         Toast.offline('您拉到底了 !!!', 1);
            //         this.scroll.finishPullUp()
            //     })
            // }
            // console.log(e);
        })


       
        

    }

   

    renderItem = (gotuan) => {
        // console.log(this.props.data1);
        return this.props.data !=null && this.props.data.data.data.map( item => <Item gotuan = {gotuan} { ...item } key = { item.item_id }></Item>)
    }

    goTop = () => {
        this.scroll.scrollTo(0,0,1000);
    }

    render () {
        return (
            <ListStyle>
                <ListContainerStyle  ref={ el => this.box = el }>
                    <ListUl>
                        { this.renderItem(this.state.goTuan) }
                    </ListUl>
                </ListContainerStyle>
                {this.state.goTopFlag && <DetailsTopStyle onClick = { this.goTop }>
                    <i className = "fa fa-angle-up"></i>
               </DetailsTopStyle>}
            </ListStyle>
        )
    }



}

export default List;